<template>
	<div id="user-panel">
		<div class="user-avatar">
			<img class="j_user-currentAvatar" :src="photo">
		</div>
		<div class="user-menu">
			<a class="ds-ib-w">
				<p class="user-person">
					<span class="user-name">{{userName}}</span>
				</p>
				<p class="ps-r">
					<span class="user-team ellipsis" title="BurningHell">{{department}}</span>
				</p>
			</a>
		</div>
	</div>
</template>
 
<script>
export default {
  name: "UserPanel",
  props: {
    photo: String,
    userName: String,
    department: String
  }
};
</script>

<style lang="less">
header {
  height: 50px;
  background-color: #53b6eb;
  #user-panel {
    width: 222px;
    float: left;
    padding: 0 15px 0 10px;
    height: 100%;
    position: relative;
    transition: background-color 0.2s linear;
  }
  .user-avatar {
    margin: 5px 9px 0 0;
    border-radius: 50%;
    float: left;
    img {
      border-radius: 50%;
      border: 1px solid #fff;
      height: 38px;
      width: 38px;
    }
  }
  .user-menu {
    max-width: 146px;
    float: left;
    a {
      height: 48px;
      font-size: 14px;
      color: #fff;
      display: block;
      text-decoration: none;
      position: relative;
      .user-person {
        padding-top: 6px;
      }
      p {
        line-height: 18px;
        .user-name {
          display: inline-block;
          vertical-align: middle;
          max-width: 60px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      .ps-r {
        position: relative;
      }
      .user-team {
        color: rgba(255, 255, 255, 0.8);
        font-size: 12px;
        max-width: 100%;
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}
</style>
